<script setup lang="ts">
import { ContentWrap } from '@/components/ContentWrap'
import { Search } from '@/components/Search'
import { useI18n } from '@/hooks/web/useI18n'
import { ElButton, ElMessage, ElDialog, ElTable, ElTableColumn } from 'element-plus'
import { Table } from '@/components/Table'
import { receiptIndex, saleIndex, receiptAdd, receiptDetail, clientSelect } from '@/api/common'
import { useTable } from '@/hooks/web/useTable'
import { placestartType } from '@/api/common/types'
import { ref, unref, reactive } from 'vue'
import { CrudSchema, useCrudSchemas } from '@/hooks/web/useCrudSchemas'
import { useAppStoreWithOut } from '@/store/modules/app'
import { useCache } from '@/hooks/web/useCache'
import { useRouter } from 'vue-router'
import { useEmitt } from '@/hooks/web/useEmitt'

useEmitt({
  name: 'getList',
  callback: (type: string) => {
    if (type === 'add') {
      tableObject.currentPage = 1
    }
    getList()
  }
})

const { push } = useRouter()
const appStore = useAppStoreWithOut()
const { wsCache } = useCache()
//用户权限数组
const userRlues = wsCache.get(appStore.getUserInfo).rlues
const userId = wsCache.get(appStore.getUserInfo).id
const checkRlues = (rlues) => {
  //检查权限
  if (userRlues.includes(rlues)) {
    return true
  } else {
    ElMessage.error('当前用户无权限操作，请联系管理员')
    return false
  }
}
const { register, tableObject, methods } = useTable<placestartType>({
  getListApi: receiptIndex,
  // delListApi: placestartDEL,
  response: {
    list: 'data',
    total: 'total'
  },
  defaultParams: {
    filter: '{"item":"sale"}'
  },
  find: userRlues.includes('201') ? -1 : userId
})

const { getList, setSearchParams, setProps } = methods

getList()

setProps({
  selection: false
})

const { t } = useI18n()

const crudSchemas = reactive<CrudSchema[]>([
  {
    field: 'index',
    label: t('tableDemo.index'),
    type: 'index',
    form: {
      show: false
    },
    detail: {
      show: false
    }
  },
  {
    field: 'client_code',
    label: '客户号',
    search: {
      show: true,
      component: 'Select',
      api: async () => {
        const res: any = await clientSelect({})
        let list: any = []
        res.data.list.forEach((item) => {
          list.push({
            label: item.code,
            value: item.code
          })
        })
        return list
      },
      componentProps: {
        filterable: true,
        options: []
      }
    },
    form: {
      colProps: {
        span: 24
      }
    },
    detail: {
      span: 24
    }
  },
  {
    field: 'paytime',
    label: '日期',
    search: {
      show: false
    },
    form: {
      colProps: {
        span: 24
      }
    },
    detail: {
      span: 24
    }
  },
  {
    field: 'receipt_money',
    label: '应收款金额',
    search: {
      show: false
    },
    form: {
      colProps: {
        span: 24
      }
    },
    detail: {
      span: 24
    }
  },
  {
    field: 'money',
    label: '收款金额',
    search: {
      show: false
    },
    form: {
      colProps: {
        span: 24
      }
    },
    detail: {
      span: 24
    }
  },
  {
    field: 'action',
    width: '260px',
    label: t('tableDemo.action'),
    form: {
      show: false
    },
    detail: {
      show: false
    }
  }
])

const { allSchemas } = useCrudSchemas(crudSchemas)

const tableShow = ref(false)
const tableData: any = ref([])
const payTime = ref('')
const searchNo = ref('')

const detailData = async (row: any, ruls: string) => {
  console.log('---详情---', row)
  let res: any = await receiptDetail(row.id)
  console.log('---获取收款单详情---', res)
  if (res && res.code == 1 && res.data && res.data.details && res.data.details.length > 0) {
    tableShow.value = true
    res.data.details.forEach((item) => {
      let time = item.createtime
      const date = new Date(time * 1000)
      var Y = date.getFullYear()
      var M = date.getMonth() + 1 < 10 ? '0' + (date.getMonth() + 1) : date.getMonth() + 1
      var D = date.getDate() < 10 ? '0' + date.getDate() : date.getDate()
      item.createtime = `${Y}-${M}-${D}`
      tableData.value.push(item)
    })
  }
}

const AddAction = () => {
  // tableShow.value = true
  push('/financialModule/salesReceiptAdd')
}

const concalAdd = () => {
  tableShow.value = false
  searchNo.value = ''
  payTime.value = ''
  tableData.value.length = 0
}
</script>

<template>
  <ContentWrap>
    <Search
      :model="{ name: '' }"
      :schema="allSchemas.searchSchema"
      @search="setSearchParams"
      @reset="setSearchParams"
    />

    <div class="mb-10px">
      <ElButton type="primary" @click="AddAction">{{ t('exampleDemo.add') }}</ElButton>
    </div>

    <Table
      v-model:pageSize="tableObject.limit"
      v-model:currentPage="tableObject.currentPage"
      :columns="allSchemas.tableColumns"
      :data="tableObject.tableList"
      :loading="tableObject.loading"
      :pagination="{
        total: tableObject.total
      }"
      @register="register"
    >
      <template #action="{ row }">
        <ElButton type="primary" @click="detailData(row, '4-3')"> 详情 </ElButton>
      </template>
    </Table>
  </ContentWrap>

  <ElDialog title="销售收款单详情" v-model="tableShow">
    <div class="tkTable">
      <ElTable :data="tableData" stripe>
        <ElTableColumn prop="item_no" label="单号" />
        <ElTableColumn prop="item_text" label="单据类型" />
        <ElTableColumn prop="money" label="实际收款金额" />
        <ElTableColumn prop="createtime" label="收款时间" />
      </ElTable>
    </div>
    <template #footer>
      <span class="dialog-footer">
        <ElButton @click="concalAdd">取消</ElButton>
      </span>
    </template>
  </ElDialog>
</template>
<style lang="less" scoped>
.fxy--center {
  display: flex;
  align-items: center;
  justify-content: center;
}
.fx--sb {
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.dhInput {
  width: 45%;
  margin-bottom: 30px;
  span {
    width: 120px;
  }
}
</style>
